<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Conversion</title>
  <style>
    .prog{padding: 10px 0;}
  </style>
  <script src="js/jquery.min.js"></script>
</head>

<body>
  <h1>Video Conversion</h1>
  <div class="fileChoseBox">
    <input type="file" id="fileInput">
  </div>
  <div class="program">
    <h3>压缩参数：</h3>
    <div class="prog prg1">
      <label for="prg1">视频(文件名)后缀：</label>
      <select id="format" onchange="updateVideoCodecs()">
        <option value="">默认</option>        
      </select>
    </div>
    <div class="prog prg2">
      <label for="prg2">视频编码：</label>
      <select id="videoCodec">
        <option value="">默认</option>
      </select>
    </div>
    <div class="prog prg3">
      <label for="prg3">视频压缩比特率：</label>
      <select id="bitrate">
        <option value="">默认</option>
        <option value="3000k">1080p（1920x1080）3000k</option>
        <option value="5000k">1080p（1920x1080）5000k</option>
        <option value="8000k">1080p（1920x1080）8000k</option>
        <option value="1500k">720p（1280x720）1500k</option>
        <option value="3000k">720p（1280x720）3000k</option>
        <option value="500k">480p（854x480）500k</option>
        <option value="1000k">480p（854x480）1000k</option>
        <option value="400k">360p（640x360）400k</option>
        <option value="800k">360p（640x360）800k</option>
      </select>
    </div>
    <div class="prog prg4">
      <label for="prg4">视频帧率：</label>
      <select id="frameRate">
        <option value="">默认</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="30">30</option>
      </select>
    </div>
    <div class="prog prg5">
      <label for="prg5">去除声音：</label>
      <select id="muteAudio ">
        <option value="false">默认(不处理)</option>
        <option value="true">静音</option>
        <option value="false">否</option>
      </select>
    </div>
  </div>
  <div id="progress"></div>
  <div id="resultOutPut">下载地址：<a href="" target="_blank" id="downloadLink"></a></div>
  <div class="submit"><button id="convertButton">Convert</button></div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    var result;
    var videoData = {
      "mp4": ["libx264", "libx265", "libvpx-vp8", "libvpx-vp9"],
      "3gp": ["h263", "libx264"], // 移除了 libvpx-vp8 因为 3gp 通常不使用 VP8
      "m4a": ["aac", "libmp3lame", "ac3"], // 保持不变，因为这些都是 FFmpeg 支持的音频编解码器
      "flv": ["flv1"], // 移除了 vp6 和 vp6f，因为这些通常不是 FFmpeg 的默认选择
      "asf": ["wmv1", "wmv2", "wmv3"], // 保持不变，因为这些都是 FFmpeg 支持的 Windows Media Video 编解码器
      "m4v": ["libx264", "mpeg4"], // 移除了 libvpx-vp8 因为 m4v 通常不使用 VP8
      "avi": ["mpeg4", "msmpeg4"], // 移除了 xvid 因为它虽然被广泛支持，但不是 FFmpeg 默认提供的
      "mov": ["libx264", "prores"], // 移除了 libvpx-vp8 因为 mov 通常不使用 VP8；prores 是 FFmpeg 支持的
      "mpg": ["mpeg1video", "mpeg2video", "mpeg4"], // 保持不变，因为这些都是 FFmpeg 支持的 MPEG 编解码器
      "ts": ["mpeg2video",'mpeg1video'], // 保持不变，因为这是 TS 文件常用的编码方式
      "wmv": ["wmv1", "wmv2", "wmv3"], // 保持不变，因为这些都是 FFmpeg 支持的 Windows Media Video 编解码器
      "mkv": ["libx264", "libx265", "libvpx-vp8", "libvpx-vp9"],
      "webm": ["libvpx-vp8", "libvpx-vp9", "av1"], // 保持不变，因为这些都是 WebM 格式支持的编解码器
      "ogg": ["theora", "libvpx"] // 移除了 libvpx-vp9 因为 ogg 通常不使用 VP9
    };
    const selectElement = document.getElementById('format');

const options = [
  { value: "", text: "默认" },
  { value: "mp4", text: ".mp4" },
  //{ value: "3gp", text: ".3gp" }, //默认不支持
  { value: "m4a", text: ".m4a" },
  { value: "flv", text: ".flv" },
  { value: "asf", text: ".asf" },
  { value: "m4v", text: ".m4v" },
  { value: "avi", text: ".avi" },
  { value: "mov", text: ".mov" },
  { value: "mpg", text: ".mpg" },
  { value: "ts", text: ".ts" },
  { value: "wmv", text: ".wmv" },
  { value: "mkv", text: ".mkv" },
  { value: "webm", text: ".webm" },
  { value: "ogg", text: ".ogg" }
];

options.forEach(option => {
  const opt = document.createElement('option');
  opt.value = option.value;
  opt.textContent = option.text;
  if (videoData.hasOwnProperty(option.value)) {
    selectElement.appendChild(opt);
  }
});
    function updateVideoCodecs() {
      var formatSelect = document.getElementById("format");
      var videoCodecSelect = document.getElementById("videoCodec");

      // 清空videoCodecSelect的选项
      videoCodecSelect.innerHTML = "";

      // 添加默认选项
      var defaultOption = document.createElement("option");
      defaultOption.value = "";
      defaultOption.text = "默认";
      videoCodecSelect.appendChild(defaultOption);

      // 根据format选择的值动态更新videoCodec的选项
      var selectedFormat = formatSelect.value;
      var codecs = videoData[selectedFormat]||[];
      codecs.forEach(function (codec) {
        var option = document.createElement("option");
        option.value = codec;
        option.text = codec;
        videoCodecSelect.appendChild(option);
      });
    }
    // 页面加载时初始化videoCodec选项
    updateVideoCodecs();
    // 监听转换进度事件
    socket.on('progress', (percent) => {
      document.getElementById('progress').innerText = `Conversion progress: ${percent.toFixed(2)}%`;
    });

    // 监听转换完成事件
    socket.on('conversionComplete', (data) => {
      console.log(data);
      document.getElementById('progress').innerText = 'Conversion complete!';
      $("#resultOutPut").show();
      $("#downloadLink").text(location.origin + result.output);
      $("#downloadLink").attr("href", location.origin + result.output);
    });

    const fileInput = document.getElementById('fileInput');
    $('#convertButton').on('click', function () {
      //获取参数
      const format = $('#format').val();
      const videoCodec = $('#videoCodec').val();
      const bitrate = $('#bitrate').val();
      const frameRate = $('#frameRate').val();
      compressionOptions = {
        format: format,
        videoCodec: videoCodec,
        bitrate: bitrate,
        frameRate: frameRate
      };
      const file = fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      formData.append('compressionOptions', JSON.stringify(compressionOptions));

      $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {
          // 文件上传成功后，触发 'convert' 事件
          if (res.code == 1000) {
            result = res;
            socket.emit('convert');
          } else {
            alert("上传失败！");
          }
        },
        error: function (err) {
          console.error('File upload failed:', err);
        }
      });
    });


  </script>
</body>

</html>